<script src="../../../../api/engineeringManage/processFlow.js"></script>
<script src="../../../../api/engineeringManage/documentManage.js"></script>
<script src="../../../../api/engineeringManage/BOMManage.js"></script>//
// 采购汇总表
//
<template>
  <div class="saleSummaryReport_main main_container">
    <div class="saleSummaryReport_header"><Breadcrumb /></div>
    <el-tabs v-model="activeName" class="saleSummaryReport_tab" tab-position="left" @tab-click="tabClick">
      <el-tab-pane name="1" label="按物料"><ByMaterial /></el-tab-pane>
      <el-tab-pane name="2" label="按供应商"><BySupplier /></el-tab-pane>
      <el-tab-pane name="3" label="按采购人员"><ByPurchaseStaff /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ByMaterial from './components/ByMaterial' // 按物料
import BySupplier from './components/BySupplier' // 按供应商
import ByPurchaseStaff from './components/ByPurchaseStaff' // 按采购人员
export default {
  name: 'Index',
  components: {
    ByMaterial, BySupplier, ByPurchaseStaff
  },
  data() {
    return {
      activeName: '1'
    }
  },
  mounted() {
    console.log('1111111',localStorage.getItem('tabIndex'))
    if (localStorage.getItem('tabIndex')) {
      this.activeName = localStorage.getItem('tabIndex')
    }else{
      this.activeName = '1'
    }
  },
  beforeDestroy() {
    // 点击其他页面的时候销毁参数，防止页面出现缓存，导致重新进入页面不是第一个tab
    localStorage.removeItem('tabIndex')
  },
  methods: {
    tabClick(data) {
      // 切换标签时，重新获取数据
      data.$children[0].getList()
      // 点击tab的时候在localStorage存入参数,防止页面刷新丢失tab页的name
      localStorage.setItem('tabIndex', this.activeName)
    }
  }
}
</script>

<style lang="less" scoped>

.saleSummaryReport_header{
  width: 180px;height: 50px;
  display: flex;align-items: center;
  margin-left: 20px;
}
.saleSummaryReport_tab{
  height: calc(100% - 50px);
  margin-left: 20px;
  overflow: revert;
  /deep/ .el-tabs__nav-wrap {
    background-color: white;
    height: calc(100% - 50px);
    width: 150px;
    .el-tabs__active-bar {
      display: unset;
    }

    .el-tabs__item{
      text-align: left;
    }
    .el-tabs__item:hover{
      color: #387bfc;
    }
    .el-tabs__item.is-active{
      color: #387bfc;
    }
    .el-tabs__active-bar{
      background-color: #387bfc;
    }

  }
  /deep/ .el-tabs__content{
    overflow: revert;height: 100%;
    .el-tab-pane{
      height: 100%;
    }
    .main_header{
      position: absolute;
      top: -50px;
      right: 0;
    }
    .main_main{
      height: calc(100% - 50px);
      margin-left: 10px;
    }
  }

  /deep/ .el-table__footer-wrapper tbody td.el-table__cell{
    background-color: rgba(0,0,0,0);
  }
  /deep/ .el-table__footer-wrapper tbody td.el-table__cell{
    background-color: transparent!important;
  }
  /deep/ .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
    border-bottom: 1px solid #dfe6ec;
  }
  /deep/ .el-table--border th.el-table__cell{
    border: none;
  }
}
</style>
